const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//ProgessPlugin是webpack内置的插件
const {ProgressPlugin,ProvidePlugin} = require("webpack")
const { title } = require('process')
module.exports={
    mode:"development",
    entry:{
        //把第三方包从业务代码中州立出来，方便后面对第三包做CDN优化
        chunk:['react','react-dom/client'],
    //   app:  path.resolve(__dirname,"../","src/main.js"),
    app:{
        //import是用来指定我们代码（项目源码)的入口
        import:path.resolve(__dirname,"../","src/main.js"),
        //我们的业务代码是以来第三方包的
        dependOn:"chunk"
    }
    },
    output:{
        path:path.resolve(__dirname,"../",'dist'),
        filename:'js/[name].[chunkhash:8].js',
        clean:true,//每次build打包时，自动删除之钱打包的文件
    },
    plugins:[
        new  HtmlWebpackPlugin({
            // template:'./public/index.html'
            template:path.resolve(__dirname,"../","public/index.html"),
            inject:"body",//把js脚本注入到body结束标签之前
            filename:"index.html",//指定打包成功后的页面的名字
            title:"vue-admin",//用来指定也买那种title标题的
            // favicon:path.resolve(__dirname,"../","public/favicon.ico")
        }),
        new ProgressPlugin({
            handler(percentage,message,...args){
                if(percentage===1){
                    console.log("100% 打包/启动完成");
                }else{
                    // console.log(`${Math.floor(percentage*100)}%正在打包（编译）。。。`);
                }
            }
        }),
        new ProvidePlugin({
            React:path.resolve(__dirname,"../","node_modules/react/index.js")
        })

    ],

    //module 是模块的意思，在webpack的眼中一切都是模块
    module:{
        //当webpack工作时，遇到以.js结尾的模块，使用babel-loader进行加载
        //loader是用来加载的，加载完后，使用@babel/** 进行编译转化，转化成ES5代码
        rules:[
            {test:/\.(js|jsx|ts|tsx|vue)$/,use:"babel-loader",exclude:/node_modules/},
            //当webpack 开始工作时，遇到以css结尾的模块时，加载并解析返回css代码，由style-loader接受，并把css代码以js的方式插入到head标签中，是以内部样式的形式
            {test:/\.(css|scss)$/,use:["style-loader","css-loader","sass-loader"]},
            // {test:/\.(png|jpg|svg|gif|jepg|webp)$/,use:"file-loader"},
            // {test:/\.(png|jpg|svg|gif|jepg|webp)$/,use:"url-loader"},
            {test:/\.(png|jpg|svg|gif|jepg|webp)$/,type:"asset/resource",
            generator: {
                filename: 'img/[name].[contenthash:8][ext]'
            }
        },
        ]

        
    },
    resolve:{
        alias:{
            //配置解析src路径
            '@':path.resolve(__dirname,"../","src")
        },
        //配置允许省略哪些后缀
        extensions:['.js','.jsx','.ts','.tsx','.vue']
    }
}